<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
// This tests moving the caret backward through content of mixed editability.
selection_test(
  [
    '<div contenteditable>',
      'editable',
      '<table border="1" contenteditable="false"><tbody><tr><td>',
        '<div style="display:inline-block;">',
          '<span>static</span>',
          '<span contenteditable="plaintext-only">|editable</span>',
         '</div>',
      '</td></tr></tbody></table>',
      'editable',
    '</div>',
  ],
  selection => selection.modify('move', 'forward', 'character'),
  [
    '<div contenteditable>',
      'editable',
      '<table border="1" contenteditable="false"><tbody><tr><td>',
        '<div style="display:inline-block;">',
          '<span>static</span>',
          '<span contenteditable="plaintext-only">e|ditable</span>',
         '</div>',
      '</td></tr></tbody></table>',
      'editable',
    '</div>',
  ],
  'Move forward character');

// The caret should end up back at the start of the editable text inside the
// table.
selection_test(
  [
    '<div contenteditable>',
      'editable',
      '<table border="1" contenteditable="false"><tbody><tr><td>',
        '<div style="display:inline-block;">',
          '<span>static</span>',
          '<span contenteditable="plaintext-only">e|ditable</span>',
         '</div>',
      '</td></tr></tbody></table>',
      'editable',
    '</div>',
  ],
  selection => selection.modify('move', 'backward', 'word'),
  [
    '<div contenteditable>',
      'editable',
      '<table border="1" contenteditable="false"><tbody><tr><td>',
        '<div style="display:inline-block;">',
          '<span>static</span>',
          '<span contenteditable="plaintext-only">|editable</span>',
         '</div>',
      '</td></tr></tbody></table>',
      'editable',
    '</div>',
  ],
  'Move backward word');

selection_test(
  [
    '<div contenteditable>',
      'editable',
      '<table border="1" contenteditable="false"><tbody><tr><td>',
        '<div style="display:inline-block;">',
          '<span contenteditable="plaintext-only">e|ditable</span>',
          '<span>static</span>',
         '</div>',
      '</td></tr></tbody></table>',
      'editable',
    '</div>',
  ],
  selection => selection.modify('move', 'forward', 'word'),
  [
    '<div contenteditable>',
      'editable',
      '<table border="1" contenteditable="false"><tbody><tr><td>',
        '<div style="display:inline-block;">',
          '<span contenteditable="plaintext-only">editable|</span>',
          '<span>static</span>',
         '</div>',
      '</td></tr></tbody></table>',
      'editable',
    '</div>',
  ],
  'Move forward word');
</script>
